<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { storeToRefs } from 'pinia'
import { loginAPI2, registerAPI2 } from '@/api/user'
import { Message } from '@arco-design/web-vue'
import { useCartStore } from '@/stores/cart'

const authStore = useAuthStore()
const { loginForm, registerForm, isAuthDialogShow, userInfo } = storeToRefs(authStore)
const { resetRegisterForm, resetLoginForm } = authStore
const { getCartList } = useCartStore()

const tabsKey = ref(1)
// 关闭对话框
const handleCancel = () => {
  isAuthDialogShow.value = false
}

// 登录操作
const handleLogin = async () => {
  const {
    statusCode,
    message,
    code,
    token,
    avatar,
    balance,
    birthday,
    email,
    id,
    username,
    password,
    address,
    phone
  }: any = await loginAPI2(loginForm.value)
  if (code === 401 || statusCode === 401) {
    Message.error({ content: message })
  } else {
    Message.success({ content: '登录成功！' })
    userInfo.value = {
      id,
      username,
      password,
      address,
      phone,
      birthday,
      avatar,
      balance,
      email
    }
    localStorage.setItem('token', token)
    getCartList()
    handleCancel()
    resetLoginForm()
  }
}

// 注册操作
const handleRegister = async () => {
  const { message, code, messages }: any = await registerAPI2(registerForm.value)
  if (code === 201) {
    Message.success({ content: message })
    tabsKey.value = 1
    resetRegisterForm()
  } else {
    Message.error({ content: message || messages.password })
  }
}
</script>

<template>
  <a-modal v-model:visible="isAuthDialogShow" mask simple :footer="false" width="480px">
    <template #title>
      <div class="w-full">
        <div class="text-right">
          <icon-close class="cursor-pointer" @click="handleCancel" />
        </div>
        <h2 class="text-center">欢迎登录昙韵官网</h2>
      </div>
    </template>

    <div class="px-10 h-84">
      <a-tabs v-model:active-key="tabsKey" size="large">
        <a-tab-pane :key="1" title="账号密码登录">
          <a-form :model="loginForm" class="w-full">
            <a-form-item field="username" hide-label>
              <a-input size="large" v-model="loginForm.username" placeholder="请输入用户名" />
            </a-form-item>
            <a-form-item field="password" hide-label>
              <a-input-password size="large" v-model="loginForm.password" placeholder="请输入密码" />
            </a-form-item>

            <a-button size="large" class="h-12 bg-primary! color-white! text-4! mt-4" @click="handleLogin"
              >登录</a-button
            >
          </a-form>
        </a-tab-pane>
        <a-tab-pane :key="2" title="快速注册">
          <a-form :model="registerForm" class="w-full">
            <a-form-item field="username" hide-label>
              <a-input size="large" v-model="registerForm.username" placeholder="请输入用户名" />
            </a-form-item>
            <a-form-item field="password" hide-label>
              <a-input-password size="large" v-model="registerForm.password" placeholder="请输入密码" />
            </a-form-item>
            <a-form-item field="passwordConfirm" hide-label>
              <a-input-password size="large" v-model="registerForm.passwordConfirm" placeholder="请再次输入密码" />
            </a-form-item>

            <a-button size="large" class="bg-primary! color-white! text-4! h-12 mt-4" @click="handleRegister"
              >注册</a-button
            >
          </a-form>
        </a-tab-pane>
      </a-tabs>
    </div>
  </a-modal>
</template>

<style scoped>
:deep(.arco-tabs-nav-tab-list) {
  display: flex;
  width: 100%;
}

:deep(.arco-tabs-nav-tab-list .arco-tabs-tab) {
  justify-content: center;
  flex: 1;
}

:deep(.arco-tabs-nav-tab-list .arco-tabs-tab .arco-tabs-tab-title) {
  font-size: 16px;
}

/* 控制对话框tab的颜色 */
:deep(.arco-tabs-tab.arco-tabs-tab-active) {
  color: rgb(118, 165, 175);
}

:deep(.arco-tabs-nav-ink) {
  background-color: rgb(118, 165, 175);
}

/* 搜索框背景白色 */
:deep(.arco-input-wrapper) {
  background-color: white;
}

:deep(.arco-input-wrapper) {
  border-color: #ddd;
}

:deep(.arco-input-wrapper:hover) {
  background-color: #fff;
  border-color: #76a5af;
}

:deep(.arco-input-wrapper.arco-input-focus) {
  border-color: #76a5af;
}

:deep(.arco-input-search .arco-input-suffix) {
  font-size: 20px;
}
</style>
